<template>
	<view>
		<view class="evearNox">
			<!-- <view class="evearHead">
				<view class="label">您对售后人员满意吗?</view> -->
			<!-- <view class="text">已对售后人员匿名</view> -->
			<!-- </view> -->
			<!-- 售后人员信息 -->
			<view class="userBox">
				<image class="logo" src="@/static/touxiang.png" mode=""></image>
				<view class="userContent">
					<view class="username">{{afterSaleName}}</view>
					<view class="userText">
						{{workendtime}} 完成售后
					</view>
				</view>
			</view>

			<!-- <view class="errorText">“请评价我们的服务，我们会督促售后人员”</view> -->
			<view class="feekContent">
				<view class="feekText">
					<u--textarea class="feekTexts" v-model="remark" maxlength="100" border="0" placeholder="客户暂时没有评价"
						height="85"></u--textarea>
					<!-- <u--textarea v-else class="feekTexts" v-model="remark" maxlength="100" border="0"
						placeholder="您的反馈会督促我们做的更好" height="85"></u--textarea> -->
				</view>
				<view class="z-lists z-bottom">
					<view class="list-value" style="position: relative;"></view>
					<view class="moreNumber">
						<view class="text">{{remark.length}}</view>/100
					</view>
				</view>
			</view>
		</view>
		<!-- 评分 -->
		<view class="rateBox">
			<view class="label">总体评分</view>
			<view class="rate-content">
				<u-rate v-if="type == 1" class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="50rpx" :minCount="1"
					:value="totalityEvealBase.totalitySatisfied" disabled ></u-rate>
				<u-rate v-else class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="50rpx" :minCount="1"
					:value="totalityEvealBase.totalitySatisfied" @change="getTotalitySatisRates"></u-rate>
				<view class="text" v-if="totalityEvealBase.totalitySatisfied == 1">非常差</view>
				<view class="text" v-else-if="totalityEvealBase.totalitySatisfied == 2">差</view>
				<view class="text" v-else-if="totalityEvealBase.totalitySatisfied == 3">一般</view>
				<view class="text" v-else-if="totalityEvealBase.totalitySatisfied == 4">满意</view>
				<view class="text" v-else-if="totalityEvealBase.totalitySatisfied == 5">非常满意</view>
			</view>
		</view>
		<view class="rateBox">
			<view class="label">态度评分</view>
			<view class="rate-content">
				<u-rate v-if="type == 1" class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="50rpx" 
					:value="attitudeScaleBase.attitudeSatisfied" disabled ></u-rate>
				<u-rate v-else class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="50rpx" :minCount="1"
					:value="attitudeScaleBase.attitudeSatisfied" @change="getAttitudeSatisRates"></u-rate>
				<view class="text" v-if="attitudeScaleBase.attitudeSatisfied == 1">非常差</view>
				<view class="text" v-else-if="attitudeScaleBase.attitudeSatisfied == 2">差</view>
				<view class="text" v-else-if="attitudeScaleBase.attitudeSatisfied == 3">一般</view>
				<view class="text" v-else-if="attitudeScaleBase.attitudeSatisfied == 4">满意</view>
				<view class="text" v-else-if="attitudeScaleBase.attitudeSatisfied == 5">非常满意</view>
			</view>
		</view>
		<view class="rateBox">
			<view class="label">响应速度</view>
			<view class="rate-content">
				<u-rate v-if="type == 1" class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="50rpx" 
					:value="technicalGradeBase.technicalSatisfied" disabled ></u-rate>
				<u-rate v-else class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="50rpx" :minCount="1"
					:value="technicalGradeBase.technicalSatisfied" @change="getTechnicalSatisRates"></u-rate>
				<view class="text" v-if="technicalGradeBase.technicalSatisfied == 1">非常差</view>
				<view class="text" v-else-if="technicalGradeBase.technicalSatisfied == 2">差</view>
				<view class="text" v-else-if="technicalGradeBase.technicalSatisfied == 3">一般</view>
				<view class="text" v-else-if="technicalGradeBase.technicalSatisfied == 4">满意</view>
				<view class="text" v-else-if="technicalGradeBase.technicalSatisfied == 5">非常满意</view>
			</view>
		</view>
		<!-- end -->
		<!-- 提交 -->
		<view class="feedBottom"  v-if="type != 1">
			<view  class="submit" @click="getSubmit">提交评价</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	let item;
	export default {
		data() {
			return {
				item: [],
				remark: "", //评价内容
				totalityEvealBase: {
					totalitySatisfied: 5, // 初始默认好评
				},
				attitudeScaleBase: {
					attitudeSatisfied: 5,
				},
				technicalGradeBase: {
					technicalSatisfied: 5
				},
				afterSaleName: '',
				workendtime: '',
				workid: '',
				customername: '',
				openid: '',
				type: 0
			}
		},
		onLoad(option) {
			this.item = JSON.parse(option.item)
			this.openid = this.item.openId
			this.workid = this.item.workid
			this.customername = this.item.contacts
			//  根据 workID  查找 评价信息
			uni.request({
				url: 'https://www.smacaftersales.com:443/afterSalesEvaluation/afterSalesEvaluation/selectEvaluation',
				method: 'POST',
				data: {
					workid: this.item.workid,
				},
				success: (res) => {
					console.log("--- 评价 ---", res);
					if (res.data.data.length > 0) {
						this.type = 1;
						this.remark = res.data.data[0].content;
						this.totalityEvealBase.totalitySatisfied = res.data.data[0].level;
						this.attitudeScaleBase.attitudeSatisfied = res.data.data[0].attitudeLevel;
						this.technicalGradeBase.technicalSatisfied = res.data.data[0].technologyLevel
					}
				}
			})
		},
		methods: {
			// 满意选择评分星级
			getTotalitySatisRates(item) {    //总体
				this.totalityEvealBase.totalitySatisfied = item;
			},
			getAttitudeSatisRates(item){    //
				this.attitudeScaleBase.attitudeSatisfied = item;
			},
			getTechnicalSatisRates(item){
				this.technicalGradeBase.technicalSatisfied = item;
			},
			// 提交评价
			getSubmit() {
				console.log("---总体星级--"+this.totalityEvealBase.totalitySatisfied,
				"---态度评价---"+this.attitudeScaleBase.attitudeSatisfied+
				"---技术评价--"+this.technicalGradeBase.technicalSatisfied+
				"--内容   --"+this.remark)
				if (this.remark.length == 0){
					uni.showToast({
						title:'您还没填写宝贵意见',
						icon:'none'
					})
				} else {
					uni.request({
						url:'https://www.smacaftersales.com:443/afterSalesEvaluation/afterSalesEvaluation/addEvaluation',
						method:'POST',
						data:{
							workid: this.workid,
							customername: this.customername,
							openid: this.openid,
							content: this.remark,
							level: this.totalityEvealBase.totalitySatisfied,
							attitudeLevel: this.attitudeScaleBase.attitudeSatisfied,
							technologyLevel: this.technicalGradeBase.technicalSatisfied
						},
						header: {
							"Content-Type": "application/json" ,
						},
						success: (res) => {
							console.log("---上报-----",res)
							if (res.data.code == 200){
								uni.showToast({
									title: '上报信息成功！！！',
									icon:'success'
								})
								this.timerIntv = setTimeout( () => {
										uni.navigateBack({
											delta: 2
										});
								}, 1500)
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate_head {
		width: 750rpx;
		height: 76rpx;
		display: flex;
		align-items: center;
		position: relative;

		.headBg {
			width: 750rpx;
			height: 76rpx;
		}

		.headZindexbox {
			position: absolute;
			z-index: 2;
			display: flex;
			align-items: center;
			// top: 20rpx;
			margin-left: 42rpx;

			.icon {
				width: 32rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFD000;
			}
		}
	}



	.evearNox {
		width: 726rpx;
		margin: 0 auto;
		background: #FFFFFF;
		margin-top: 16rpx;
		padding-bottom: 20rpx;
		border-radius: 12rpx;

		.feekContent {
			width: 670rpx;
			margin: 0 auto;
			background: #F9FAF9 !important;
			border-radius: 12rpx;

			.list-value {
				// width: 230px;
				color: #333;
				background: #F9FAF9 !important;
				// justify-content: right;
				// text-align: right;
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				// position: absolute;
				// right: 10px;
				.u-upload__wrap__preview__image {
					border: 2rpx solid #E9E9E9 !important;
				}
			}

			.list-icon-right {
				margin-left: 10px;
			}

			.feekText {
				background: #F9FAF9 !important;
				border-top-left-radius: 12rpx;
				padding-top: 30rpx;
				border-top-right-radius: 12rpx;

				color: #B4ABAB !important;

				.feekTexts {
					padding: 0 !important;
					margin-left: 32rpx;
					width: 600rpx;
					color: #B4ABAB !important;
					background: #F9FAF9 !important;
				}

			}

			.z-lists {
				width: 100%;
				display: flex;
				align-items: center;
				position: relative;
				padding: 10px 0px;
				border-radius: 6px;
				background: #F9FAF9 !important;

				.moreNumber {
					position: absolute;
					right: 30rpx;
					bottom: 15rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #A4A4A4;

					.text {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #303030;
					}
				}

				.z-list-border {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 96%;
					height: 1px;
					border-bottom: 1rpx solid #EFEFEF;
				}

				.uploadBox {
					width: 148rpx;
					height: 148rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					border: 2rpx solid #E9E9E9;
				}
			}

		}

		.evearHead {
			width: 670rpx;
			display: flex;
			height: 82rpx;
			margin: 0 auto;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			.label {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #A4A4A4;
			}
		}

		// 用户信息
		.userBox {
			width: 670rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			margin-top: 26rpx;

			.logo {
				width: 72rpx;
				height: 72rpx;
				margin-right: 14rpx;
			}

			.userContent {
				.username {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-bottom: 15rpx;
				}

				.userText {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.errorText {
			font-size: 22rpx;
			width: 670rpx;
			margin: 0 auto;
			text-align: left;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FF0000;
			margin-top: 32rpx;
		}

		.checkBox {
			width: 670rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			margin-top: 40rpx;

			.textActive {
				background: #FFF6E1 !important;
			}

			.checkLabel {
				width: 326rpx;
				display: flex;
				align-items: center;
				height: 76rpx;
				justify-content: center;
				background: #F6F6F6;
				border-radius: 12rpx;

				.text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;

					.icon {
						width: 52rpx;
						height: 52rpx;
						margin-right: 20rpx;
					}


				}
			}
		}

		.labeList {
			width: 670rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			background: #FFFFFF;
			margin-top: 26rpx;

			.label {
				width: auto;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				background: #F6F6F6;
				color: #9B9B9B;
				padding: 6rpx 20rpx;
				margin-bottom: 24rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
			}

			.actived {
				background: #FFF6E1 !important;
				color: #AD8539 !important;
			}
		}
	}

	// 评分
	.rateBox {
		width: 726rpx;
		height: 106rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 16rpx;

		.label {
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.rate-content {
			display: flex;
			align-items: center;

			.rates {
				margin-left: 48rpx;
				margin-right: 52rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #2C2C2C;
			}
		}
	}

	// 提交
	.feedBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 116rpx;
		background: #FFFFFF;

		.submit {
			width: 646rpx;
			height: 88rpx;
			background: #AD8539;
			border-radius: 50rpx;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>